<template>
	<view class="list">
		<view class="bg">
			<view class="filter">
				<view v-for="item in filterList" :key="item.value">
					<switch :disabled="keyword==item.value" :checked="keyword==item.value" style="transform:scale(0.7)"
						@change="changeSwitch($event,item.value)" />
					{{item.key}}
				</view>
			</view>
			<view class="customer">
				<uni-datetime-picker @change="changeDate" :clear-icon="false" v-model="range" type="daterange" />
			</view>
			<view class="customer">
				<text class="flex1">{{entity.cCusName}}</text>
				<text>{{this.data[this.data.length-1]?momenyFormat(this.data[this.data.length-1].Owing):'0.00'}}</text>
			</view>
		</view>
		<view class="tableData">
			<table border="1" class="table">
				<thead>
					<th>日期</th>
					<th>类型</th>
					<th>金额</th>
					<th>余额</th>
					<th>操作</th>
				</thead>
				<tbody>
					<tr v-for="item in data" :key="item.Id" :class="item.Type==3?'warn':''">
						<td>{{item.CreateTime?item.CreateTime.substring(0,10):''}}</td>
						<td class="action">{{item.Type==0?'还款':item.Type==1?'赊货':item.Type==2? '现收':'作废'}}</td>
						<td class="number">{{momenyFormat(item.Money)}}</td>
						<td class="number">{{momenyFormat(item.Owing)}}</td>
						<!-- @click="toDetail(item.BillId)"  -->
						<td class="action">
							<text v-if="item.Type!=0"  @click="toWebView(item.BillId,item.billlistId)">明细</text>
						</td>
					</tr>
				</tbody>
			</table>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" title="催款" :duration="2000" :before-close="true"
				@close="close" @confirm="confirm" placeholder="请输入客户手机号"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import {
		regPhone
	} from '@/utils/regExp.js'
	import {
		momenyFormat,
		getMonthRange
	} from '@/util/util.js'
	export default {
		data() {
			return {
				filterList: [{
						key: '近一月',
						value: '1'
					},
					{
						key: '近三月',
						value: '3',
					}, {
						key: '近半年',
						value: '6'
					}
				],
				entity: {},
				data: [],
				pagination: {
					PageIndex: 1,
					PageRows: 30,
					SortField: "CreateTime",
					SortType: "desc",
				},
				total: 0,
				keyword: '1',
				range: [], // 日期范围
			}
		},
		onLoad(query) {
			this.entity = JSON.parse(query.data)
			this.range = getMonthRange(1)
			this.getDataList()
		},
		methods: {
			// 催款确认
			confirm(e) {
				if (!regPhone.test(e)) return this.$api.msg('请输入正确的手机号')
				// 请求
				this.$refs.popup.close()
			},
			close() {
				this.$refs.popup.close()
			},
			// 日期选择
			changeDate(e) {
				this.keyword = 0
				this.range = e
				this.getDataList()
			},
			// 明细
			// toDetail(Id) {
			// 	uni.navigateTo({
			// 		url: '/components/page/Detail?id=' + Id
			// 	})
			// },
			// 去小票页面
			toWebView(Id, billId) {
				
				// let isOverDay = this.entity.PendingSum - this.entity.CollectionSum
				// console.log('是否逾期',this.entity, isOverDay)
				uni.navigateTo({
					url: '/pages/Arrears/webview?Id=' + Id + '&billId=' + billId 
				})
			},
			// 月份选择
			changeSwitch(e, item) {
				this.keyword = item
				this.range = getMonthRange(Number(this.keyword))
				this.getDataList()
			},
			getDataList() {
				uni.showLoading()
				this.$http('post', '/BO/BIllcollection/GetDataList', {
					Search: {
						CustomerId: this.entity.Id,
						Month: this.keyword,
						StartTime: this.range[0],
						EndTime: this.range[1],
						CompanyId: this.entity.CompanyId
					}
				}).then(res => {
					uni.hideLoading()
					if (!res.Success) return this.$api.msg(res.Msg)
					this.data = res.Data
					this.total = res.total
				})
			},
			// 千分位
			momenyFormat(num) {
				return momenyFormat(num)
			}
		}
	}
</script>

<style scoped lang="scss">
	.warn {
		background-color: #ff9999;
	}

	.list {
		padding: 10px;
		height: 100%;
		width: 100%;
		background-image: url('/static/background.png');
		background-size: cover;
		box-sizing: border-box;
		overflow-y: scroll;

		.bg {
			background-color: rgba(255, 255, 255, .8);
			padding: 20rpx 0;
			border-radius: 10rpx;
			margin-bottom: 10px;
			padding-right: 20rpx;
		}

		.filter {
			display: flex;
			justify-content: space-between;
			margin-bottom: 10px;
		}

		.customer {
			font-weight: bold;
			padding-left: 20rpx;
			display: flex;
			justify-content: space-between;

			.flex1 {
				flex: 1;
				overflow: hidden;
			}
		}

		.tableData {
			width: 100%;
			background-color: #fff;

			.table {
				width: 100%;
				border-collapse: collapse;
				border-color: #ececec;

				td {
					padding: 0 10rpx;
					line-height: 2;
					font-size: 12px;
					text {
						color: blue;
					}
				}

				.number {
					text-align: right;
				}

				.action {
					text-align: center;
				}
			}
		}
	}
</style>